<template>
	<el-container>
		<el-header>
		<!-- 	<el-form :model="searchmodel" :inline="true" class="demo-form-inline" style="width: 70%; float: left;">
				<el-form-item label="账号">
					<el-input placeholder="账号" v-model="searchmodel.account" @input="change($event)"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search">搜索</el-button>
				</el-form-item>
			</el-form> -->
			<div style="float: right;">
				<el-button type="success" icon="el-icon-circle-plus" @click="addAdmin()"></el-button>
			</div>
		</el-header>
		<el-main style="padding: unset;">
			<el-table :max-height="tableHeight" :data="tableData" border>
				<el-table-column prop="account" label="账号">
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
						<!-- <el-button type="text" style="color: red;" @click="open2" size="small">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<!-- Form -->

		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
			<el-form :model="sysUserModel">
				<el-row>
					<el-col :lg="12">
						<el-form-item label="账号" :label-width="formLabelWidth">
							<el-input v-model="sysUserModel.account" @input="change($event)"></el-input>
						</el-form-item>
						<el-form-item label="密码" :label-width="formLabelWidth">
							<el-input v-model="sysUserModel.password" @input="change($event)"></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="12">
						
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button v-if="dialogTitle == '添加管理员'" type="primary" @click="addSysUserToDb()">确 定</el-button>
					<el-button v-if="dialogTitle == '编辑管理员'" type="primary" @click="updateSysUser()">确 定</el-button>
				
			</div>
		</el-dialog>

	</el-container>
</template>

<script>
	// import common from './common'
	export default {
		name: 'sys-user-page',
		data() {
			return {
				pageSize: 99999,
				currentPage: 0,
				dialogTitle:'添加管理员',
				/*delete dailog*/
				delDialogVisible: false,
				/*upload*/
				imageUrl: '',
				formLabelWidth: '120px',
				sysUserModel: {
					id:this.$uuid.v1(),
					account: 'admin',
					password:'admin'
				},
				searchmodel: {
					account: 'bookAdmin'
				},
				dialogFormVisible: false,
				tableHeight: 800, //document.body.clientHeight - 120,
				tableData: [{
						account: 'admin'
					},
					{
						account: 'bookAdmin'
					}
				]
			}
		},
		created: function() {
			console.log()
			this.getSysUsers()
		},
		methods: {
			getSysUsers() {
				var _self = this
				console.log(this.currentPage * this.pageSize + 1)
				this.$SysDatastore.find({}).skip(this.currentPage * this.pageSize + 1).limit(this.pageSize).exec(function(err, docs) {
					console.log(docs)
					_self.tableData = docs
				})
			},
			addAdmin(){
				this.dialogTitle = '添加管理员'
				this.dialogFormVisible=true
			},
			handleClick(row) {
				console.log(row);
				this.dialogTitle = '编辑管理员'
				this.sysUserModel = row
				this.dialogFormVisible = true
			},
			change(e) {
				this.$forceUpdate()
			},
			/*upload*/
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			/*delete dialog*/
			open2() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			addSysUserToDb() {
				var _self = this
				this.$SysDatastore.insert(this.sysUserModel, function(err, doc) {
					console.log('inserted:', doc)
					_self.getSysUsers()
					_self.dialogFormVisible = false
				})
			
				//         this.$db.find({},function(){
				//             //获取查询的数据
			
				//         })
				//         this.$db.update({条件},{$set:{更改的数据}},function(){
			
				//         })
				//         this.$db.remove({条件},{},function(){
			
				//         })
			
			},
			updateSysUser() {
				var _self = this
				this.$SysDatastore.update({
					_id: this.sysUserModel._id
				}, {
					$set: this.sysUserModel
				}, function(err,docs) {
					_self.dialogFormVisible = false
				})
			}
		},
		watch: {
			tableHeight(val) {
				console.log('sdfasdf')
				// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
				if (!this.timer) {
					// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
					this.tableHeight = val
					console.log("kkkkk" + val)
					this.timer = true
					let that = this
					setTimeout(function() {
						// 打印screenWidth变化的值
						console.log(that.tableHeight)
						that.timer = false
					}, 400)
				}
			}
		},
		mounted() {
			const that = this
			window.onresize = () => {
				return (() => {
					window.screenHeight = document.body.clientHeight
					that.tableHeight = window.screenHeight - 180
				})()
			}
		}
	}
</script>

<style scoped="scoped">
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {

		color: #99a9bf;
	}

	.demo-table-expand .el-form-item label {
		width: 100% !important;
		font-size: 20px !important;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.dialog-form .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	/* upload */
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 170px;
		height: 170px;
		line-height: 170px;
		text-align: center;
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
	}

	.avatar {
		width: 170px;
		height: 170px;
		display: block;
	}
</style>
